<template>
	<view>
		<view class="info-box">
			<view class="info-each">
				<view class="">任务分类</view>
				<view class="" @click="show = true">
					<text class="tint">{{cate}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">项目标题</view>
				<view class="input">
					<input type="text" v-model="info.name" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">平台名称</view>
				<view class="input">
					<input type="text" v-model="info.platform" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">所需人数</view>
				<view class="input">
					<input type="text" v-model="info.num" :placeholder="`不少于${tasknum}人`" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">发布任务</view>
				<view class="">
					<u-radio-group v-model="unit" placement="row">
						<u-radio activeColor="#FFCE54" label="积分" name="积分" :customStyle="{marginRight: '20px'}">
						</u-radio>
						<u-radio activeColor="#FFCE54" label="佣金" name="佣金" :customStyle="{marginRight: '20px'}">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<!-- <view class="">积分</view> -->
				<view class="">佣金</view>
				<view class="input">
					<input type="text" v-model="info.price" :placeholder="`最低${taskprice}`" />
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<!-- <view class="">总积分</view> -->
				<view class="">总佣金</view>
				<view class="">{{toatl}}</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">手续费</view>
				<view class="">{{free}}</view>
			</view>
		</view>
		
		<view class="info-box">
			<view class="info-each">
				<view class="">做单时间</view>
				<view class="" @click="show1 = true">
					<text class="tint">{{tasktime}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">审核时间</view>
				<view class="" @click="show2=true">
					<text class="tint">{{checktime}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">设备</view>
				<view class="">
					<u-radio-group v-model="info.equiptype" placement="row">
						<u-radio activeColor="#FFCE54" label="全部" name="0" :customStyle="{marginRight: '20px'}">
						</u-radio>
						<u-radio activeColor="#FFCE54" label="安卓" name="1" :customStyle="{marginRight: '20px'}">
						</u-radio>
						<u-radio activeColor="#FFCE54" label="苹果" name="2" :customStyle="{marginRight: '20px'}">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">限制次数</view>
				<view class="" @click="show3 = true">
					<text class="tint">{{limit}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="info-each">
				<view class="">限制距离</view>
				<view class="input">
					<input type="text" placeholder="请输入" />
					<text>公里</text>
				</view>
			</view>
		</view>
		
		<view class="hint">
			输入接单人与您之间的距离，距离是0，表示不限制距离
		</view>
		<view class="btn">发布</view>
		
		<u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm" @cancel="show = false"></u-picker>
		<u-picker :show="show1" :columns="timecolumns" keyName="name" @confirm="confirm1" @cancel="show1 = false">
		</u-picker>
		<u-picker :show="show2" :columns="timecolumns" keyName="name" @confirm="confirm2" @cancel="show2 = false">
		</u-picker>
		<u-picker :show="show3" :columns="limitcolumns" keyName="name" @confirm="confirm3" @cancel="show3 = false">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unit: '',
				equipment:'',
				cate:'请选择',
				columns: [],//任务分类
				show: false,
				show1:false,
				show2:false,
				show3:false,
				tasknum:'30',//不少于人数
				taskprice:'10',//最低佣金
				tasktime: '30分钟', //做单时间
				checktime: '30分钟',//审核时间
				limit: '每人一次',
				info: {
					name: '',//项目标题
					platform: '',//平台名称
					task_cate_id: '',//任务分类的id
					num: '', //所需人数
					price: '', //佣金
					total_price: '',
					tasknum: 30,
					checknum: 30,
					equiptype: '0',
					limittype: '',
					distance: '0',
					content: '',
					step: [{
						type: 0,
						image: '',
						content: ''
					}],
					checkstep: [{
						type: 0,
						image: '',
						content: ''
					}]
				},
				percent: '',
				
				timecolumns: [
					[{
							name: '30分钟',
							num: 30
						},
						{
							name: '1小时',
							num: 60
						},
						{
							name: '3小时',
							num: 180
						},
						{
							name: '6小时',
							num: 360
						},
						{
							name: '12小时',
							num: 720
						},
						{
							name: '1天',
							num: 1440
						},
						{
							name: '2天',
							num: 2880
						},
						{
							name: '3天',
							num: 4320
						},
						{
							name: '5天',
							num: 7200
						},
						{
							name: '7天',
							num: 10080
						},
						{
							name: '15天',
							num: 21600
						},
						{
							name: '20天',
							num: 28800
						},
						{
							name: '30天',
							num: 43200
						}
					]
				],
				limitcolumns: [
					[{
							name: '每人一次',
							num: 0
						},
						{
							name: '每日一次',
							num: 1
						},
						{
							name: '每人三次',
							num: 2
						},
					]
				],
			}
		},
		computed:{
			toatl() {
				return (this.info.price * this.info.num).toFixed(2) || '0.00'
			},
			free() {
				return (this.toatl * this.percent / 100).toFixed(2) || '0.00'
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			confirm3(e) {
				console.log(e)
				this.limit = e.value[0].name
				this.info.limittype = e.value[0].num
				this.show3 = false
			},
			confirm2(e) {
				console.log(e)
				this.checktime = e.value[0].name
				this.info.checknum = e.value[0].num
				this.show2 = false
			},
			confirm1(e) {
				console.log(e)
				this.tasktime = e.value[0].name
				this.info.tasknum = e.value[0].num
				this.show1 = false
			},
			confirm(e) {
				console.log(e)
				this.cate = e.value[0].name
				this.info.task_cate_id = e.value[0].id
				this.tasknum = e.value[0].tasknum
				this.taskprice = e.value[0].taskprice
				this.show = false
			},
			getInfo() {
				uni.$u.http.post('/posttask').then(res => {
					if (res.code == 1) {
						this.columns = [
							res.data.cateList
						]
						this.percent = res.data.percent
						// this.cate = res.data.cateList[0].name
						// this.info.task_cate_id = res.data.cateList[0].id
						// this.tasknum = res.data.cateList[0].tasknum
						// this.taskprice = res.data.cateList[0].taskprice
					}
				}).catch((res) => {
			
				})
				uni.$u.http.post('/getconfig', {
					type: 10
				}).then(res => {
					if (res.code == 1) {
						res.data.config = res.data.config.replace(/<img/g,
							"<img style='max-width:100%;height:auto'")
						this.notice = res.data.config
				
					}
				}).catch((res) => {
				
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
	.info-box {
		width: 622rpx;
		padding: 29rpx 32rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin: auto;
		margin-top: 24rpx;
	
		.info-each {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
	
			.input {
				display: flex;
				align-items: center;
				text-align: right;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
	
				text {
					display: inline-block;
					padding-left: 30rpx;
				}
			}
	
			image {
				width: 32rpx;
				height: 32rpx;
				position: relative;
				top: 7rpx;
				left: 20rpx;
			}
			.tint {
				font-size: 30rpx;
				font-weight: 500;
				// color: #999999;
			}
		}
		.upimg {
			margin-top: 30rpx;
		}
	
		.wire {
			width: 622rpx;
			height: 1rpx;
			background-color: #f0f0f0;
			margin: auto;
			margin: 30rpx 0;
		}
	
		.tags-box {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			.tags {
				display: flex;
				margin-top: 24rpx;
				.tag {
					background-color: #f6f6f6;
					font-size: 30rpx;
					padding: 19rpx 48rpx 19rpx 24rpx;
					font-weight: 500;
					color: #333333;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-right: 24rpx;
					image {
						width: 30rpx;
						height: 30rpx;
						position: relative;
						top: 7rpx;
						left: 20rpx;
					}
				}
			}
		}
	}
	
	.hint {
		padding: 32rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
	}
	.btn {
		background: linear-gradient(to right, #FFDF41, #FFC141);
		height: 88rpx;
		border: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 50rpx auto;
		width: 686rpx;
		border-radius: 44rpx;
		flex-shrink: 0;
	}
</style>